Highcharts একটি শক্তিশালী JavaScript লাইব্রেরি, যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Highcharts ব্যবহার করতে, আপনাকে এটি আপনার Angular বা অন্য JavaScript প্রজেক্টে ইনস্টল করতে হবে। npm (Node Package Manager) ব্যবহার করে Highcharts লাইব্রেরি ইনস্টল করা অত্যন্ত সহজ। এখানে Highcharts ইনস্টল করার ধাপগুলো বিস্তারিতভাবে দেয়া হলো।
Angular বা অন্য JavaScript প্রজেক্টে Highcharts ইনস্টল করতে, প্রথমে npm ব্যবহার করে Highcharts প্যাকেজটি ইনস্টল করুন। টার্মিনাল বা কমান্ড প্রম্পটে নিচের কমান্ডটি রান করুন:
npm install highcharts --save
এই কমান্ডটি Highcharts প্যাকেজটি আপনার প্রজেক্টে ইনস্টল করবে এবং package.json ফাইলে ডিপেনডেন্সি হিসেবে যোগ করবে।
যদি আপনি Angular এর সাথে Highcharts ব্যবহার করতে চান, তাহলে আপনাকে highcharts-angular নামক একটি Angular র্যাপার ইনস্টল করতে হবে। এটি Angular এর মধ্যে Highcharts ইন্টিগ্রেশন সহজ করে তোলে। এটি ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:
npm install highcharts-angular --save
এই কমান্ডটি Highcharts এর জন্য Angular র্যাপার প্যাকেজ ইনস্টল করবে।
Highcharts এবং highcharts-angular ইন্সটল করার পর, আপনাকে Angular মডিউলে Highcharts এবং Highcharts Angular র্যাপার ইমপোর্ট করতে হবে।
প্রথমে, আপনার Angular অ্যাপের app.module.ts ফাইলে প্রয়োজনীয় মডিউলগুলো ইমপোর্ট করুন:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular'; // Import Highcharts Angular module
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HighchartsChartModule], // Add Highcharts module here
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Highcharts লাইব্রেরি এবং Angular র্যাপার সঠিকভাবে ইনস্টল ও ইমপোর্ট করার পর, আপনি আপনার Angular কম্পোনেন্টে Highcharts ব্যবহার করতে পারবেন। উদাহরণস্বরূপ:
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts'; // Import Highcharts library
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
Highcharts = Highcharts;
chartOptions = {
chart: {
type: 'line'
},
title: {
text: 'Sample Highcharts in Angular'
},
series: [{
name: 'Data Series',
data: [1, 2, 3, 4, 5]
}]
};
}
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;">
</highcharts-chart>
এই কোডটি Angular কম্পোনেন্টে Highcharts চার্ট তৈরি করবে।
Highcharts লাইব্রেরি npm এর মাধ্যমে সহজেই ইনস্টল করা যায় এবং Angular অ্যাপ্লিকেশনের সাথে ইন্টিগ্রেট করা সম্ভব। Highcharts-এর সাহায্যে আপনি খুব সহজেই ইন্টারেক্টিভ এবং রেসপন্সিভ চার্ট তৈরি করতে পারবেন। highcharts-angular র্যাপার ব্যবহার করলে Angular অ্যাপ্লিকেশনের মধ্যে Highcharts এর ইন্টিগ্রেশন আরও সহজ হয়ে যায়।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
